import React, { useState, useContext, createContext, useRef, useMemo } from 'react'
import './index.less'
import FatherContext from './FatherContext'
import Son from './components/son'
// 这是最顶级父组件
const ContextPage = () => {
  const [text, setText] = useState('我刚初始化')
  const [memoNum, setMemoNum] = useState(0)
  const changeText = (str: string) => {
    setText(str)
  }
  const memoHandle = () => {
    setMemoNum(Math.random())
  }
  // 我把FatherContext.Provider 的value 使用useMemo进行了重写；
  //第一个参数是一个函数，第二个参数是数组，只有数组中的变量改变时，第一个参数的函数才会返回一个新的对象
  //一般就是你传什么第二参数的数组就传什么
  const infoMemo = useMemo(() => {
    return {
      text: text,
      setText: setText
    }
  }, [text, setText])
  return (
    <div className='context_page'>
      <h1>useContext的基本使用</h1>
      <div className="box">
        测试memo：{memoNum}<button onClick={memoHandle}>点我测试memo</button>
      </div>
      <FatherContext.Provider value={infoMemo}>
        <Son></Son>

      </FatherContext.Provider>
    </div>
  )
}

export default ContextPage